<!--  frame 意见反馈 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>意见反馈</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	.wrap {
	  margin-top: .20rem;
	}

	.s_box1 {
	  height: 1.00rem;
	  display: flex;
	  align-items: center;
	  background: #fff;
	  padding: 0 .30rem;
	}

	.s_title {
	  flex: auto;
	  font-size: .32rem;
	  color: #666;
	}

	.s_type {
	  font-size: .30rem;
	  color: #999;
	}

	.s_mr_20 {
	  margin-bottom: .20rem;
	}

	.jiantou {
	  width: .24rem;
	  height: .24rem;
	  line-height: .24rem;
	  font-size: .24rem;
	  color: #999;
	  margin-left: .20rem;
	  margin-top: .02rem;
	}

	.s_box2 {
	  padding: .30rem;
	  background: #fff;
	}

	.opinion_box {
	  width: 100%;
	  height: 2.40rem;
	  font-size: .30rem;
	  text-align: justify;
	  color: #666;
		border: solid #F8F8F8 0px;
	}

	.s_box3 {
	  padding: .30rem;
	  background: #fff;
	}

	.s_bar {
	  height: .30rem;
	  line-height: .30rem;
	  font-size: .30rem;
	  color: #999;
	  margin-bottom: .30rem;
	}

	.photo_box {
	  display: flex;

	}

	.photo_item {
	  position: relative;
	  margin-right: .10rem;
	}

	.photo {
	  width: 1.70rem;
	  height: 2.00rem;
	  border-radius: .10rem;
	}

	.cancel {
	  position: absolute;
	  right: -.20rem;
	  top: -.20rem;
	  width: .60rem;
	  height: .60rem;
	}

	.submit {
	  width:6.1rem;
		display: flex;
	  height: .90rem;
	  line-height: .90rem;
	  background: #FF502D;
	  text-align: center;
	  font-size: .36rem;
	  color: #fff;
	  border-radius:.10rem;
	  margin-top: .60rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button::after {
	  border: none;
	}

	.btn1 {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
	}

	.bg {
	  opacity: 0.7;
	}

	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<div class="wrap">
		  <div class="s_box1 s_mr_20">
		    <div class="s_title">反馈类型</div>
		    <!-- <div class="s_type">业务反馈</div> -->
			 <picker @click="bindPickerChange" value="{{index}}" range="{{array}}">
			    <div class="s_type">
			     {{array[index]}}
			    </div>
			  </picker>
		    <div class="iconfont iconxiayibu jiantou"></div>
		  </div>
		  <div class="s_box2 s_mr_20">
		    <textarea class="opinion_box" v-model="opinion"  placeholder="请输入您的意见（500字以内）" placeholder-style="color:#999" maxlength="500"></textarea>
		  </div>
		  <div class="s_box3">
		    <div class="s_bar">添加应用截图(最多4张)</div>
		    <div class="photo_box">

			  <div v-for="(item,index) in imgall" :key="index" class="photo_item">
			    <image class="photo" :src="item+'?imagediv2/1/w/170/h/200'" @click="PhotoBrowser(index)"></image>
			    <image class="cancel" src="../image/cancel.png" @click.stop="deleteImg(index)" ></image>
			  </div>

			  <div v-if="imgall.length < 4" class="photo_item" @click="UploadImage">
			    <image class="photo" src="../image/plus.png"></image>
			    <!-- <image class="cancel" src="../../../images/cancel.png"></image> -->
			  </div>

		    </div>
		  </div>
		</div>
		<div class="btn1">
			<div class="submit" @click="getsaveUserOpinion">
			  提交
			</div>
		</div>

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			array: ['意见反馈','用户使用反馈'],
			index: 0,
			content:'',
			images:[],
			getQiniuToken:'',
			opinion :'',
			imgall:[],
		},
		mounted: function(){

		},
		methods: {
				bindPickerChange (){
					hhPanel.actionSheet({
					    buttons: ['意见反馈','用户使用反馈'],
					    success: function(ret1,ret2)
					    {
								vm.index = ret1.index
					        // // 选择"评论"
					        // Console(ret1);      // {"id":"","label":"评论","index":2}
					        // Console(ret2);      // 评论
					    }
					});
				},
				chooseImg(){},
				//提交
				CouponList (){},
				// 上传图像
				UploadImage(){
					hhFile.qnUploadImage({
						 token_url: "/api/qiniu",
						 prefix: "xiaojinyu/file",
						 thumb_w: 200,
						 thumb_h: 200,
						 success: function(img,thumb,info){
								vm.imgall.push(img)
						 }
						});
				},

			 //保存意见
				getsaveUserOpinion (){
					if(this.opinion.length == 0){
						api.toast({
							msg: "意见不能为空",
							duration: 2000,
							location: 'middle'
						});
						return
					}
					if(this.opinion.length > 500){
						api.toast({
							msg: "意见不能超过500字",
							duration: 2000,
							location: 'middle'
						});
						return
					}


					let imgsrc = ''
					for (let index in this.imgall) {
						imgsrc = imgsrc + this.imgall[index]
						if(index < this.imgall.length-1){
							imgsrc = imgsrc + ','
						}
					}
					let param = {}
					param['feedback.type']=this.index;
					param['feedback.content']=this.opinion;
					param['feedback.img_url']=this.imgsrc
					AjaxSafe({
							url:"/xapp/user/feedback",
							data:param,
							loader:true,
						success: function(res) {
								if (res.state) {
									api.alert({
											title: '提示',
											msg: res.msg,
									}, function(ret, err) {
										api.closeWin();
									});
								} else {
									api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
								}
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				},
				// 删除图片
				deleteImg: function (index) {
				 let i = index;
				 this.imgall.splice(i, 1);
			 },
				// 图片预览
				PhotoBrowser:function (index) {
						arr = this.imgall
						var photoBrowser = api.require('photoBrowser');
						photoBrowser.open({
								images: arr,
								activeIndex: index,
								bgColor:'#000',
						}, function(ret, err) {
								if (ret.eventType == 'click') {
										photoBrowser.close();
								}
						});
				}

		},

	});
}

</script>
</html>
